<template>
    <div class="container">
      <div v-for="(entry, index) in qrcodeEntries" :key="index" class="qrcode-entry">
        <van-image
          :src="entry.urls[0][0]"
          fit="contain"
          width="100%"
          height="300px"
          @click="showQRCode(entry)"
        >
          <template #default>
            <div class="time">{{ entry.time }}</div>
          </template>
        </van-image>
      </div>
      <van-button
        round
        block
        type="primary"
        @click="loadQRCodes"
        v-if="!noMoreQRCodes"
        class="load-button"
      >
        加载更多
      </van-button>
      <div v-if="noMoreQRCodes" class="end-of-logs">到底了</div>
  
      <van-popup v-model:show="showPopup" position="center" class="popup-container">
        <van-swipe class="qrcode-swipe" :autoplay="0" indicator-color="lightblue">
          <van-swipe-item v-for="(url, index) in currentQRCodeUrls" :key="index">
            <van-image :src="url" fit="contain" width="100%" height="300px" />
          </van-swipe-item>
        </van-swipe>
      </van-popup>
    </div>
  </template>
  
  <script>
  import { Toast, Image as VanImage, Button, Popup, Swipe, SwipeItem } from 'vant';
  import api from '../api';
  
  export default {
    name: 'QRCodeViewer',
    components: {
      'van-image': VanImage,
      'van-button': Button,
      'van-popup': Popup,
      'van-swipe': Swipe,
      'van-swipe-item': SwipeItem,
    },
    data() {
      return {
        qrcodeEntries: [],
        start: 0,
        length: 10,
        noMoreQRCodes: false,
        showPopup: false,
        currentQRCodeUrls: [],
      };
    },
    mounted() {
      this.loadQRCodes();
    },
    methods: {
      async loadQRCodes() {
        try {
          const response = await api.get('/api/get-qrcode', {
            params: { start: this.start, length: this.length },
          });
          if (response.data.qrcodeEntries.length === 0) {
            this.noMoreQRCodes = true;
            Toast.success('到底了');
          } else {
            this.qrcodeEntries.push(...response.data.qrcodeEntries);
            this.start += this.length;
          }
        } catch (error) {
          Toast.fail('Failed to load QR codes');
          console.error(error);
        }
      },
      showQRCode(entry) {
        this.currentQRCodeUrls = entry.urls.flat(); // 展开URL数组
        this.showPopup = true;
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }
  
  .qrcode-entry {
    width: 100%;
    margin-bottom: 16px;
  }
  
  .time {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    color: #666;
  }
  
  .load-button {
    margin-top: 16px;
  }
  
  .end-of-logs {
    text-align: center;
    margin-top: 10px;
    color: gray;
  }
  
  .popup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .qrcode-swipe {
    width: 100%;
    height: 300px;
  }
  </style>
  